<template>
	<div v-if="list" class="antiSeal">
        <div class="adaptive-container">
            <div class="item disFlex vertical">
                <div class="item-title">配置</div>
                <div class="item-content disFlex vertical">
                    <div class="disFlex Flex-middle">
                        <div class="item-span">域名动态跳转</div>
                        <RadioGroup v-model="list.appConfigMallInfo.wap_dynamic_domain" @on-change="changeJumpFn">
	                        <Radio label="1">
	                            <span>开启</span>
	                        </Radio>
	                        <Radio label="0">
	                            <span>关闭</span>
	                        </Radio>
	                    </RadioGroup>
                    </div>
                    <div class="des disFlex Flex-middle">
                        <div class="item-span">　</div>
                        <div>开启后，可支持分享出去的被封域名正常访问，应对微信封杀</div>
                    </div>
                </div>
                <div class="item-content disFlex vertical">
                    <div class="disFlex Flex-middle">
                        <div class="item-span">H5开发者密钥</div>
                        <Input v-model="list.wechatInfo.access_appsecret" placeholder="" style="width: 300px" />
                    </div>
                    <div class="des disFlex Flex-middle">
                        <div class="item-span">　</div>
                        <div>用于调用接口；<span style="color: #358fe4; cursor: pointer;" @click="getKey">查看如何获取密钥</span></div>
                    </div>
                </div>
                <div class="disFlex Flex-middle" style="margin: 15px 0 30px 30px;">
                    <Button type="primary" @click="saveSetFn">保存</Button>
                </div>
            </div>
            <div class="item disFlex vertical" style="padding-bottom: 30px;">
                <div class="item-title">平台域名管理</div>
                <div class="describe disFlex vertical">
                	<span>注意事项:</span>
                	<div>1、添加域名无需以 http:// 或者 https:// 开头（例如：h5.banchengyun.com）;</div>
                	<div>2、H5域名解析添加A记录：47.96.41.82;</div>
                	<div>3、在微信服务号后台公众号设置＞功能设置＞设置业务域名和JS接口安全域名（例如：h5.banchengyun.com）;</div>
                	<div>4、在微信商户平台后台＞产品中心＞开发配置＞设置支付授权目录为https://api.banchengyun.com/mall/order/;</div>
                	<div>5、点击启用。</div>
                </div>
                <div class="add-url disFlex vertical">
                	<div class="disFlex Flex-middle">
                		<Button type="primary" @click="addUrlFn">添加域名</Button>
                	</div>
                	<Table :columns="columns1" :data="list.domainList" style="margin-top: 30px;"></Table>
                </div>
            </div>
        </div> 
        <Modal
            v-model="codeData.off"
            title="推广二维码"
            @on-ok="ok"
            @on-cancel="cancel">
            <div class="disFlex vertical Flex-middle">
                <img :src="codeData.img">
                <div class="disFlex Flex Flex-middle Flex-center" style="width: 100%;">
                    <span style="margin-right: 15px;">商城链接</span>
                    <Input v-model="codeData.link" style="width: 300px;" />
                </div>
            </div>
        </Modal>
    </div>
</template>

<script>
    // 列表请求/删除列表请求
    import {antiSeal,dynamicDomainState,addUrl,removeUrl,setUrl,openUrl} from 'api/setting'

	export default {
		name: 'antiSeal',
        data(){
        	return {
        		columns1: [
                    {
                        title: '域名',
                        key: 'domain'
                    },
                    {
                        title: '使用状态',
                        render: (h, params) => {
                            return h('span',{
                                style: {
                                    color: params.row.is_using == 0 ? 'red' : 'green',
                                },
                            }, params.row.is_using == 0 ? '未使用' : '已使用');
                        }
                    },
                    {
                        title: '是否解析',
                        render: (h, params) => {
                            return h('span', {
                                style: {
                                    color: params.row.resoluteState == 0 ? 'red' : 'green',
                                },
                            },params.row.resoluteState == 0 ? '未使用' : '已使用');
                        }
                    },
                    {
                        title: 'JS绑定域名',
                        key: 'domain'
                    },
                    {
                        title: '创建时间',
                        key: 'timeCreateFormat'
                    },
                    {
                        title: '推广链接',
                        render: (h, params) => {
                            return h('div', {
                                attrs: {
                                    class: 'disFlex Flex-middle'
                                },
                                style: {
                                    display: params.row.is_using == 1 ? 'flex' : 'none!important'
                                },
                            },[
                                h('img', {
                                    attrs: {
                                        src: this.list.qrCode,
                                    },
                                    style: {
                                        width: '75px',
                                        height: '75px',
                                        marginRight: '15px',
                                        cursor: 'pointer',
                                    },
                                    on: {
                                        click: () => {
                                            this.codeData.off = true
                                            this.codeData.img = this.list.qrCode
                                            this.codeData.link = this.list.qrCodePath
                                        }
                                    }
                                }),
                                h('span', '点击查看大图')
                            ]);
                        }
                    },
                    {
                        title: '操作',
                        width: 230,
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small',
                                    },
                                    style: {
                                        marginRight: '5px',
                                    },
                                    on: {
                                        click: () => {
                                            this.setUrlFn(params.row.domain_id,params.index)
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small',
                                    },
                                    style: {
                                        marginRight: '5px',
                                        display: params.row.is_using == 1 ? 'inline-block' : 'none'
                                    },
                                }, '已启用'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small',
                                    },
                                    style: {
                                        marginRight: '5px',
                                        display: params.row.is_using == 0 ? 'inline-block' : 'none'
                                    },
                                    on: {
                                        click: () => {
                                            this.$Modal.confirm({
                                                title: '提示',
                                                content: `是否开启域名`,
                                                onOk: () => {
                                                    this.openUrlFn(params.row.domain_id)
                                                },
                                            })
                                        }
                                    }
                                }, '启用'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.$Modal.confirm({
                                                title: '提示',
                                                content: `是否删除此域名`,
                                                onOk: () => {
                                                    this.removeFn(params.row.domain_id,params.index)
                                                },
                                            })
                                        }
                                    }
                                }, '删除')
                            ],);
                        }
                    },
                ],

                list: null,

                addUrlText: '',

                // 二维码图片
                codeData: {
                    off: false,
                    img: '',
                    link: '',
                }
        	}
        },
        created(){
            this.init()
        },
        methods: {
            init(){
                antiSeal().then(_data => {
                    console.log(_data)
                    if(_data.status == 'ok'){
                        _data.data.appConfigMallInfo.wap_dynamic_domain = _data.data.appConfigMallInfo.wap_dynamic_domain + ""

                        this.list = _data.data
                    }
                }).catch(_err => {
                    console.log(_err)
                })
            },

            // 添加域名
            addUrlFn(){
                this.addUrlText = ''
                this.$Modal.confirm({
                    render: (h) => {
                        return h('Input', {
                            props: {
                                value: this.addUrlText,
                                autofocus: true,
                                placeholder: '请输入域名'
                            },
                            on: {
                                input: (val) => {
                                    this.addUrlText = val;
                                }
                            }
                        })
                    },
                    title: '请输入域名信息',
                    onOk: () => {
                        this.axiosFn()
                    }
                })
            },

            // 添加域名
            axiosFn(){
                let params = {
                    domain: this.addUrlText 
                }
                addUrl(params).then(_data => {
                    window.location.reload()
                }).catch(_err => {
                    this.$Message.error(JSON.stringify(_err));
                })
            },

            // 删除域名
            removeFn(_id,_index){
                let params = {
                    domainId: _id
                }
                removeUrl(params).then(_data => {
                    if(_data.status == 'ok'){
                        this.list.domainList.splice(_index,1)
                        this.$Message.success('操作成功');
                    }
                }).catch(_err => {
                    this.$Message.error(JSON.stringify(_err));
                })
            },

            // 开启域名
            openUrlFn(_id,_index){
                let params = {
                    domainId: _id
                }
                openUrl(params).then(_data => {
                    window.location.reload()
                }).catch(_err => {
                    this.$Message.error(JSON.stringify(_err));
                })
            },

            // 编辑域名
            setUrlFn(_id,_index){
                let saveUrl = this.list.domainList[_index].domain
                this.$Modal.confirm({
                    render: (h) => {
                        return h('Input', {
                            props: {
                                value: this.list.domainList[_index].domain,
                                autofocus: true,
                                placeholder: '请输入域名'
                            },
                            on: {
                                input: (val) => {
                                    this.list.domainList[_index].domain = val;
                                }
                            }
                        })
                    },
                    title: '请输入修改域名',
                    onOk: () => {
                        let params = {
                            domain: this.list.domainList[_index].domain,
                            domainId: _id
                        }
                        setUrl(params).then(_data => {
                            this.$Message.success('操作成功');
                        }).catch(_err => {
                            this.$Message.error(JSON.stringify(_err));
                        })
                    },
                    onCancel: () => {
                        this.list.domainList[_index].domain = saveUrl;
                    }
                })
            },

            // 保存配置
            saveSetFn(){
                let params = {
                    state: this.list.appConfigMallInfo.wap_dynamic_domain,
                    accessAppsecret: this.list.wechatInfo.access_appsecret,
                }
                dynamicDomainState(params).then(_data => {
                    this.$Message.success('保存成功')
                }).catch(_err => {
                    this.$Message.error('保存失败')
                })
            },

            // 域名动态跳转
            changeJumpFn(_data){
                this.list.appConfigMallInfo.wap_dynamic_domain = _data
            },

            // 获取密钥
            getKey(){
                window.open("http://file.open.chihe.so/video/%E8%AE%A2%E9%98%85%E5%8F%B7%E5%AF%86%E9%92%A5.png"); 
            }
        }
     }
</script>

<style scoped lang="less">
	.antiSeal {
        padding: 12px 20px 12px 12px;
        box-sizing: border-box;
    } 

    // 自适应容器
    .adaptive-container {
        background: #fff;

        .item {
            width: 100%;

            .item-title {
                background: #f8f8f9;
                padding: 15px 30px;
                box-sizing: border-box;
                font-size: 12px;
                font-weight: bold;
                color: #464c5b;
            }

            .item-content {
                padding: 15px 30px;
                box-sizing: border-box;

                .item-span {
                    width: 100px;
                }

                .des {
                    margin-top: 10px;
                }
            }

            &>.describe {
            	width: calc(100% - 60px);
            	background: #eee;
            	padding: 30px;
            	margin: 30px;
            	line-height: 30px;
            }

            &>.add-url {
            	padding: 0 30px;
            	box-sizing: border-box;
            }
        }
    } 

    .footer-div {
        width: 100%;
        background: #fff;
        padding: 15px 0;
        box-sizing: border-box;
        border-top: 1px solid #ddd;
    }
</style>

<style type="text/css">

    .antiSeal .ivu-table-title {
        border-bottom: 1px solid #eeeeee;
    }
    
    .antiSeal .ivu-table:before {
        display: none!important;
        background-color: transparent!important;
    } 

    .antiSeal .ivu-table:after {
        width: 0!important;
        height: 100%!important;
        background: transparent!important;
        display: none!important;
    }

    .antiSeal .ivu-table-wrapper {
        border: none!important;
    }

    .antiSeal tr span {
        font-size: 12px!important;
    }

</style>